<template>
  <div ref="containerRef" class="the-code-editor-container" />
</template>

<script setup lang="ts">
import * as monaco from 'monaco-editor'
import { onUnmounted, ref } from 'vue';
const monacoInstance = ref<any>(null)
const provider = ref(null)
const containerRef=ref<any>(null)
const codeValue = ref('')
onUnmounted(() => {
  dispose()
})
function init(value:any) {
  dispose()
  if (!codeValue.value) {
    codeValue.value = value
  }
  // 初始化编辑器实例
  monacoInstance.value = monaco.editor.create(containerRef.value, {
    value: value || codeValue.value,
    theme: 'vs',
    autoIndex: true,
    readOnly: true,
    minimap: { enabled: false }
  })
}
function dispose() {
  if (monacoInstance.value) {
    if (monacoInstance.value.getModel()) {
      monacoInstance.value.getModel().dispose()
    }
    monacoInstance.value.dispose()
    monacoInstance.value = null
  }
}
function refresh() {
  dispose()
  init(null)
}
</script>

<style lang="scss" scope>
.the-code-editor-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #eaeaea;

  .monaco-editor .scroll-decoration {
    box-shadow: none;
  }
}
</style>
<style>
.decorationsOverviewRuler {
  background: white;
}
</style>
